<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="./lib/vue.js"></script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 550px;
            margin: 30px auto;
            text-align: center;
        }

        form {
            width: 500px;
            display: flex;
            flex-direction: column;
            margin: 0 auto;
        }

        .dialog {
            width: 500px;
            padding: 20px;
            background-color: #fff;
            border: 2px solid #ccc;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            height: 120px;
            display: none;
        }

        .dialog.active {
            display: block;
        }

        .dialog>span {
            position: absolute;
            right: 15px;
            top: 15px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <form>
            <label>
                姓名：<input type="text" v-model="info.name">
            </label>
            <label>
                性别：<input type="text" v-model="info.gender">
            </label>
            <label>
                年龄：<input type="text" v-model="info.age">
            </label>
            <button type="button" @click="addHandler">添加</button>
        </form>
        <table border="1" cellspacing="0">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody v-for="(item,index) in users" :key="item.id">
                <tr>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.gender}}</td>
                    <td>{{item.age}}</td>
                    <td>
                        <button @click="showEdit(item.id)">编辑</button>
                        <button @click="delHandler(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div :class="{ dialog: true, active: isShow }">
            <span @click="cancelEdit">X</span>
            <form>
                <label>
                    id: <input disabled type="text" v-model="update.id">
                </label>
                <label>
                    姓名: <input type="text" v-model="update.name">
                </label>
                <label>
                    性别: <input type="text" v-model="update.gender">
                </label>
                <label>
                    年龄: <input type="text" v-model="update.age">
                </label>
                <button type="button" @click="edit">确认编辑</button>
            </form>
        </div>
    </div>

    <script src="./lib/vue.js"></script>
    <script>
        let users = [
            { id: 1, name: 'Jack', age: 18, gender: '男' },
            { id: 2, name: 'Rose', age: 20, gender: '女' },
            { id: 3, name: 'Tom', age: 22, gender: '男' }
        ]
        let vm = new Vue({
            el: '#app',
            data: {
                users,
                //因为需要向数组中添加一个对象数据类型
                //直接使用对象来采集用户信息
                info: {},
                //更新数据
                update: {},
                //控制编辑是否显示
                isShow: false
            },
            methods: {
                //添加
                addHandler() {
                    //首先补充一个id
                    this.info.id = this.users[this.users.length - 1].id + 1
                    //把数据插入到数据中
                    this.users.push(this.info)
                    //清楚输入框
                    this.info = {}
                },
                showEdit(id) {
                    //进入编辑状态
                    const result = this.users.find(item => item.id === id)
                    this.update = { ...result }
                    this.isShow = true


                    
                },
                //删除
                delHandler(id) {
                    this.users = this.users.filter(item => item.id !== id)
                },
                cancelEdit() {
                    //关闭对话框
                    this.isShow = false
                },
                edit() {
                    //就把update 的内容在从新赋值
                    //找到this.users 内 id 一样的那一条数据 
                    let result = this.users.find(item => item.id === this.update.id)
                    // 2. 进行替换操作
                    result.name = this.update.name
                    result.age = this.update.age
                    result.gender = this.update.gender

                    // // 3. 关闭 dialog 对话框
                    this.isShow = false
                }
            },
        })
    </script>
</body>

</html>